<!DOCTYPE html>
<!--静态文件标签（下面是模板标签）-->
{% load staticfiles %}
<html>
<head>
        <meta charset="utf-8">
        <title>塔拆的主页</title>
        <link rel="stylesheet" href="{% static 'css/semantic.css' %}"  media="screen" title="no title" charset="utf-8">
        <link href="https://fonts.googleapis.com/css?family=Oswald|Raleway" rel="stylesheet">


        <style type="text/css">
            h1 {
                font-family:'Oswald', sans-serif!important;
                font-size:40px;
            }

            body {
                font-family: 'Raleway', sans-serif;
            }
            p {
                font-family: 'Raleway', sans-serif;
                font-size:18px;
            }
            .ui.vertical.segment.masthead {
                height: 300px;
                background: url({% static 'images/star_banner.jpg' %});
                background-size: cover;
                background-position: 100% 80%;
            }

            .ui.container.segment {
                width: 800px;
            }

            .ui.center.aligned.header.blogslogon {
                margin-top: 40px;
            }

            .ui.center.aligned.header.blogslogon p {
                margin-top: 10px;
                color: white;
                font-size: 10px;
            }
            .ui.container.nav {
                width: 500px;
            }

        </style>
    </head>
    <body>
        <div class="ui inverted vertical  segment masthead">

            <h1 class="ui center aligned header blogslogon" style="font-size:50px;font-family: 'Raleway', sans-serif!important;">
                老胡的博客
                <p class="ui sub header">
                    everyone has a story to tell
                    每个人都有故事要说
                </p>

            </h1>
        </div>
        <div class="ui container nav">
            <div class="ui borderless text three item menu ">
                <div class="ui simple dropdown  item">
                    类别
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item" href="">生活</a>
                        <a class="item" href="">知识</a>
                    </div>
                </div>
                <a class="item" href="">
                    Popular
                </a>
                <a class="item" href="">
                    关于
                </a>

            </div>
        </div>

        <div class="ui divider"></div>

        <div class="ui  vertical segment">

            {% for aritcle in aritcle_list %}
                <div class="ui container vertical segment">
                    <a href="{% url 'firstapp:aritcle_page' aritcle.id %}">
                        <!--上面是超链接-->
                        <h1 class="ui header">
                            {{ aritcle.headline }}
                        </h1>
                    </a>

                    <i class="icon grey small unhide">10,000</i>
                    <p>
                        <!--下面采用了过滤器超过100个字就不会显示    -->
                        {{ aritcle.content|truncatewords:50}}
                        <!--href后面是目标地址  template中可以用 url 'app_name:url_name' param%-->
                        <a href="{% url 'firstapp:aritcle_page' aritcle.id %}">
                            <i class="angle tiny double grey right icon">READMORE</i>
                        </a>
                    </p>

                    <div class="ui mini  tag label">
                        生活
                    </div>
                </div>
            {% endfor %}
        </div>

        <div class="ui inverted  vertical very padded  segment">
            Mugglecoding®
        </div>
    </body>
</html>
